import * as echarts from "echarts/core";
//引入折线图所需的组件
//import { GridComponent } from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
//引入堆叠面积图表组件
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';


// import { LineChart } from 'echarts/charts';
// import { UniversalTransition } from 'echarts/features';
//import { CanvasRenderer } from 'echarts/renderers';

var myChart1, myChart2 //2个图表实例【基础折线图、堆叠图】

//折线图函数封装
function initBasicLineChart(chartDom, xAxisData, seriesData) {
  echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
  //var chartDom = document.getElementById("main");
  //判断实例图表是否未空，如果不为空的进行销毁
  if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
    myChart1.dispose();
  }
  myChart1 = echarts.init(chartDom); //vue中引入dom元素的方式，此为第三步：访问dom
  var option = {
    xAxis: {
      type: "category",
      data: xAxisData,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: seriesData,
        type: "line",
      },
    ],
  };

  option && myChart1.setOption(option);
}

function initStackedAreaChart(chartDom, xAxisData, tempMinSeries, tempMaxSeries) {
  echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition,
  ]);
  // var chartDom = document.getElementById('main');
  if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
    myChart2.dispose();
  }
  myChart2 = echarts.init(chartDom);
  var option = {
    title: {
      text: "Stacked Area Chart",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["tempMin", "tempMax"],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: xAxisData,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "tempMin",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: tempMinSeries,
      },
      {
        name: "tempMax",
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: tempMaxSeries,
      },
    ],
  };

  option && myChart2.setOption(option);
}




export { initBasicLineChart, initStackedAreaChart}